<template>
  <div>
    <Header :type="'screening'" @tag="getList" @reset="reset">
      <div class="head-tit">
        内容筛选
      </div>
      <div class="head-operation">
        <span class="head-label">
          分销角色：
        </span>
        <el-select
          v-model="selectVal"
          placeholder="请选择"
          size="small"
          class="head-input"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <span class="head-label">
          结算方式：
        </span>
        <el-select
          v-model="selectValTwo"
          placeholder="请选择"
          size="small"
          class="head-input"
        >
          <el-option
            v-for="item in optionsTwo"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span class="head-label">
          结算状态：
        </span>
        <el-select
          v-model="selectThree"
          placeholder="请选择"
          size="small"
          class="head-input"
        >
          <el-option
            v-for="item in optionsThree"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="head-operation">
        <span class="head-label">
          选择时间：
        </span>
        <div class="head-time">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
            style="width:100%;"
            size="small"
          >
          </el-date-picker>
        </div>
        <el-button size="small" type="primary" @click="getList(1)"
          >近七天</el-button
        >
        <el-button size="small" type="primary" @click="getList(2)"
          >近一个月</el-button
        >
      </div>
    </Header>
    <Main :data="listData" :footer-lock="totals > 10">
      <el-table-column
        label="结算人名称"
        align="center"
        property="nick_name"
      ></el-table-column>
      <el-table-column label="结算人头像" align="center">
        <template slot-scope="scope">
          <img
            :src="$store.state.qiniu + scope.row.cover + $store.state.imgRotate"
            width="80px"
          />
        </template>
      </el-table-column>
      <el-table-column label="分销角色" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.distribute_type == 1" style="color:#E6A23C;"
            >用户分销员</span
          >
          <span v-else style="color:#67C23A;">内部分销员</span>
        </template>
      </el-table-column>
      <el-table-column label="结算方式" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">自动结算</span>
          <span v-if="scope.row.type == 2">手动结算</span>
          <span v-if="scope.row.type == 3">后台结算</span>
        </template>
      </el-table-column>
      <el-table-column
        label="结算佣金（元）"
        align="center"
        property="settlement_money"
      ></el-table-column>
      <el-table-column label="结算状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.settlement_status == 1">
            已结算
          </span>
          <span v-if="scope.row.settlement_status == 2" style="color:#F56C6C;">
            结算失败
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="250"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="msgTag(scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </Main>

    <Footer :total="totals">
      <el-pagination
        class="foot-operation-pagination"
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>

    <msg
      :visible="visible === 'msg'"
      :val="Val"
      :types="'settlement'"
      @outDialog="outDialog"
    />
  </div>
</template>
<script>
import { SETTLEMENTORDERLOG } from "../../service";

export default {
  components: {
    msg: () => import("../component/mag")
  },
  data() {
    return {
      activeName: "user",
      listData: [],
      selectVal: 0,
      selectValTwo: 0,
      selectThree: 0,
      options: [
        { label: "全部分销员", value: 0 },
        { label: "用户分销员", value: 1 },
        { label: "内部分销员", value: 2 }
      ],
      optionsTwo: [
        { label: "全部结算方式", value: 0 },
        { label: "自动结算", value: 1 },
        { label: "手动结算", value: 2 },
        { label: "后台结算", value: 3 }
      ],
      optionsThree: [
        { label: "全部结算状态", value: 0 },
        { label: "已结算", value: 1 },
        { label: "结算失败", value: 2 }
      ],
      totals: 0,
      pages: 0,
      time: [],
      visible: "",
      Val: {}
    };
  },

  created() {
    this.getList();
  },
  methods: {
    outDialog() {
      this.getList();
      this.visible = "";
      this.Val = {};
    },
    msgTag(e) {
      this.visible = "msg";
      this.Val = e;
    },
    reset() {
      this.selectVal = 0;
      this.selectValTwo = 0;
      this.selectThree = 0;
      this.time = [];
      this.getList();
    },
    async getList(days) {
      await SETTLEMENTORDERLOG({
        page: this.pages,
        pageshow: 10,
        stime: this.time ? this.time[0] : "",
        etime: this.time ? this.time[1] : "",
        days,
        distribute_type: this.selectVal,
        type: this.selectValTwo,
        settlement_status: this.selectThree
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
